<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="人生就是一部小说,记录生活的点滴" />
    <meta name="keywords" content="记录生活,小说人说,分享你的生活动态,订阅他人的分享" />
    <script>
    window._time = [Date.now()];
    </script>
    <link rel="stylesheet" href="../css/reset.min.css" />
    <link rel="stylesheet" href="../css/personal_center.min.css" />
    <link rel="stylesheet" href="../util/font-awesome-3.2.1/css/font-awesome.min.css" />
    <script type="text/javascript" src="../js/lib/jq.js"></script>
    <title>我的课表</title>
</head>

<body>
    <div class="page-header clearfix">
        <h1 class="page-header-title pull-left">每个人的人生都是一部小说</h1>
        <div class="page-header-personal pull-right">
            <a href="../tpl/personal_center.html" class="personal-photo">
                <span class="name">君逸</span>
                <img src="../img/avtar.png" alt="test" />
            </a>
        </div>
    </div>
    <div class="page-aside">
        <ul class="navbar">
            <li>
                <a href="../tpl/index.html" class="home">
                    <i class="icon-home"></i>
                </a>
                <a href="../tpl/me.html">
                    <i class="icon-user"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="page-content clearfix">
        <div class="p-left fl">
            <div class="imgcon">
                <img src="../img/avtar.png">
            </div>
            <p class="nick-name">君逸</p>
            <div class="my-index">
                <a href="../tpl/me.html">我的动态</a>
            </div>
        </div>
        <div class="p-right fl">
            <div class="e-title">
                <span>基本资料</span>
                <a href="javascript:void(0)" class="js-edit">编辑</a>
            </div>
            <table class="info-table">
                <tr>
                    <td>昵称：</td>
                    <td>
                        <input type="text" class="disable js-nickname" value="君逸" />
                    </td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td>
                        <input type="text" class="disable js-realname" value="张秀华">
                    </td>
                </tr>
                <tr>
                    <td>性别<span>:</span></td>
                    <td>
                        <input type="radio" class="disable" name="sex" value="woman" class="e-s disabled" />女
                        <input type="radio" class="disable" name="sex" value="man" checked="checked" class="e-s disabled" />男
                    </td>
                </tr>
                <tr>
                    <td>E-mail:</td>
                    <td>
                        <input type="text" class="disable js-email" value="837001764@qq.com">
                    </td>
                </tr>
                <tr>
                    <td>手机：</td>
                    <td>
                        <input type="text" class="disable js-phone" value="13617661403">
                    </td>
                </tr>
                <tr>
                    <td>QQ:</td>
                    <td>
                        <input type="text" class="disable js-qq" value="827001764"> </td>
                </tr>
                <tr>
                    <td>Blog:</td>
                    <td>
                        <input type="text" class="disable js-blog" value="http:github.com/Moriarty02"> </td>
                </tr>
                <tr>
                    <td class="sign">签名:</td>
                    <td>
                        <textarea class="slogan disable js-slogan" name="slogan" rows="10" cols="85" maxlength="200" placeholder="随便写点什么让大家认识你吧!" class="e-s disabled"></textarea>
                    </td>
                </tr>
            </table>
            <div class="p-control">
                <a href="javascript:void(0)" class="js-save btn btn-primary">保存</a>
                <a href="javascript:void(0)" class="js-cancel btn btn-white">取消</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    var app = {
        info: {},
        init: function() {

            this.render();
            this.bindEvent();
        },
        render: function() {
            //init render
            $(".p-control").hide();
        },
        bindEvent: function() {
            var edit_btn = $(".js-edit");
            var info_table = $(".info-table");

            var save_btn = $(".js-save");
            var cancel_btn = $(".js-cancel");

            edit_btn.on("click", function(e) {
                app.info = {
                    nickname: $(".js-nickname").val(),
                    realname: $(".js-realname").val(),
                    sex: $("input[name=sex]:checked").val(),
                    email: $(".js-email").val(),
                    phone: $(".js-phone").val(),
                    qq: $(".js-qq").val(),
                    blog: $(".js-blog").val(),
                    sign: info_table.find("textarea").val()
                };
                info_table.find("input").removeClass("disable");
                info_table.find("textarea").removeClass('disable');
                $(".p-control").fadeIn(200);


            });

            save_btn.on("click", function(e) {

                var sendData = {
                    nickname: $(".js-nickname").val(),
                    realname: $(".js-realname").val(),
                    sex: $("input[name=sex]:checked").val(),
                    email: $(".js-email").val(),
                    phone: $(".js-phone").val(),
                    qq: $(".js-qq").val(),
                    blog: $(".js-blog").val(),
                    sign: info_table.find("textarea").val()
                };
                $.$.post('/path/to/file', sendData, function(data, textStatus, xhr) {
                    if (data && data.code == 1) {
                        alert("修改成功");
                        window.location.reload();
                    } else {
                        alert("修改失败");
                        console.log(data.code + "  " + data.msg);
                    }
                });

            });

            cancel_btn.on("click", function(e) {

                $.each(app.info, function(key, value) {
                   
                    if (key == "sex") {
                        var sexg = $("input[name=sex]");
                        for (var i = 0, length = sexg.length; i < length; i++) {
                         
                            if (sexg.eq(i).val() == value) {
                                sexg.eq(i).prop("checked",true)
                            } else {
                                sexg.eq(i).removeAttr('checked');
                            }
                        }

                    } else if (key == "sign") {
                        info_table.find("textarea").val(value);
                    } else {

                        $(".js-" + key).val(value);
                    }
                });
                 $(".p-control").fadeOut(200);
            });

        },
        //重置表单

    }
    app.init();
    </script>
</body>

</html>
